<template>
	<view>
		<nav-header title="聊天背景" custom-nav></nav-header>
	</view>
	<view class="container">
		<view class="item">
			<view>自定义:</view>
			<up-upload
				:fileList="fileList3"
				@afterRead="afterRead"
				@delete="deletePic"
				name="3"
				multiple
				:maxCount="10"
				:previewFullImage="true"
			></up-upload>
		</view>
		<view class="theme-item">
		<view class="theme-text">系统：</view>
		<view class="themes">
			<view class="selected-themes">
				<view class="selected" v-for="item in themesList" :key="item.id" @click="selectTheme(item)">
					<svg-icon :icon="item.color" :width="130"></svg-icon>
					<text>{{item.text}}</text>
					<svg-icon v-if="item.id === selectedThemeId" icon="dui" :width="45" class="getIt"></svg-icon>
				</view>
			</view>
		</view>
		</view>
		<view class="item-color">
			<view>文字颜色</view>
			<view class="color-preview" :style="{ backgroundColor: fullColorCode }">	
			</view>
				<up-input type="text" placeholder="请输入颜色代码（如 #FF5733）" v-model="colorCode">
							<template #prefix>
								<up-text
									text="#"
									margin="0 3px 0 0"
									type="tips"
								></up-text>
							</template>
						</up-input>
		</view>
		<view class="effect-preview">
			<view>效果预览</view>
			<view class="chat-container" :style="{ backgroundColor: backgroundColor }">
				 <view class="title">大岭山镇群聊</view>
			  <scroll-view class="message-list" scroll-y>
			    <view v-for="(message, index) in messages" :key="index" :class="['message', message.sender === 'me' ? 'me' : 'other']">
			      <view class="avatar" v-if="message.sender === 'other'">
			        <image :src="message.avatar" mode="aspectFill"></image>
			      </view>
			      <view class="content">
			        <view class="name" v-if="message.sender === 'other'"></view>
			        <view class="text" :style="{ color: fullColorCode }">{{ message.content }}</view>
			      </view>
			      <view class="avatar" v-if="message.sender === 'me'">
			        <image :src="message.avatar" mode="aspectFill"></image>
			      </view>
			    </view>
			  </scroll-view>
			</view>
		</view>
	</view>
</template>
	
<script setup>
	import { ref,computed, watch } from 'vue';
	
	// 假数据
	const themesList = ref([
	  { id: 1, color: 'black', text: '磨砂黑' },
	  { id: 2, color: 'white', text: '纯白' },
	  { id: 3, color: 'grey', text: '商务灰' },
	  { id: 4, color: 'blue', text: '海洋蓝' },
	  { id: 5, color: 'yellow', text: '土豪金' },
	]);
	const selectedThemeId = ref(4); // 假设默认选中蓝色主题
	
	// 选择主题
	const selectTheme = (item) => {
	  selectedThemeId.value = item.id;
	   backgroundColor.value = item.color;
	};
	
	// 保存设置
	const saveSettings = () => {
	  console.log('保存设置:', selectedThemeId.value);
	  // 在这里可以添加保存设置的逻辑
	};
	// 定义响应式数据
	const colorCode = ref('FFB6C1'); // 默认颜色为白色
	// 计算完整的颜色代码（包括 #）
	const fullColorCode = computed(() => {
	  return `#${colorCode.value}`;
	});
	
	// 监听 colorCode 的变化
	watch(colorCode, (newColor) => {

	  if (!isValidColor(fullColorCode.value)) {
	    colorCode.value = 'FFB6C1'; // 如果无效，清空输入
	  }
	});
	
	// 检查颜色代码是否有效
	function isValidColor(color) {
	  const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
	  return colorRegex.test(color);
	}
	// 定义静态消息数据
	const messages = ref([
	  { sender: 'other', content: '你好！', name: '朋友', avatar: 'https://iknow-pic.cdn.bcebos.com/b58f8c5494eef01fdef7b25bf2fe9925bd317d49' },
	  { sender: 'me', content: '你好！', name: '我', avatar: 'https://img0.baidu.com/it/u=3582999362,3809132610&fm=253&fmt=auto&app=120&f=JPEG'},
	  { sender: 'other', content: '今天天气真好！', name: '朋友', avatar: 'https://iknow-pic.cdn.bcebos.com/b58f8c5494eef01fdef7b25bf2fe9925bd317d49' },
	  { sender: 'me', content: '是啊，适合出去走走。', name: '我', avatar: 'https://img0.baidu.com/it/u=3582999362,3809132610&fm=253&fmt=auto&app=120&f=JPEG' }
	]);
	const backgroundColor = ref('#e6f7ff'); // 初始背景色为浅蓝色

</script>

<style lang="scss">
	.container{
		margin: 20rpx;
		padding-bottom: 40rpx;
		.item{
			display: flex;
			gap: 20rpx;
			// align-items: center;
		}
		.theme-item{
			display: flex;
			.theme-text{
				width: 100rpx;
			}
			.themes {			
				.selected-themes {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20rpx;
			
					.selected {
						display: flex;
						align-items: center;
						flex-direction: column;
						font-size: 26rpx;
						position: relative;
						margin-right: 14rpx;
						.getIt {
							position: absolute;
							top: 22%;
							left: 30%;
						}
					}
				}

			}
		}
		.item-color{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			.color-preview{
				 width: 20%;
				 height: 60rpx;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  color: black;
				  font-size: 28rpx;
				  border-radius: 5rpx;
			}
		}
		
		// 效果预览
		.effect-preview{
			margin-top: 20rpx;
			gap: 20rpx;
			display: flex;
			.chat-container {
			  display: flex;
			  width: 43vh;
			  flex-direction: column;
			  height: 60vh;
			}
			.title {
			  text-align: center;
			  margin: 20px 0;
			}
			
			.message-list {
			  flex: 1;
			  overflow-y: auto;
			  padding: 10px;
			}
			
			.message {
			  display: flex;
			  margin-bottom: 10px;
			  align-items: flex-end;
			}
			
			.message.me {
			  justify-content: flex-end;
			}
			
			.message.other {
			  justify-content: flex-start;
			}
			
			.avatar {
			  margin-right: 10px;
			  width: 40px;
			  height: 40px;
			  border-radius: 50%;
			  overflow: hidden;
			}
			
			.avatar image {
			  width: 100%;
			  height: 100%;
			}
			
			.content {
			  max-width: 70%;
			  padding: 10px;
			  border-radius: 10px;
			  background-color: #fff;
			  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			}
			
			.message.me .content {
			  background-color: #dcf8c6;
			  color: #000;
			}
			
			.name {
			  font-size: 12px;
			  color: #999;
			  margin-bottom: 5px;
			}
			
			.text {
			  word-wrap: break-word;
			}
		}
	}
	
	       
</style>
